<template>
  <div class="box4" ref="map">

  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
// 引入echarts插件
import * as echarts from 'echarts'
// 引入中国地图的json文件
import chinaJson from './china.json'

// 获取echarts地图dom节点
let map = ref()
// 注册中国地图
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
  let mycharts = echarts.init(map.value)
  mycharts.setOption({
    geo: {
      show: true, //是否显示地理坐标系组件
      map: 'china',
      roam: true, //是否开启鼠标缩放和平移
      aspectScale: 0.75, //用于设置scale地图的长宽比
      label: {  //图形的文本标签
        show: true, //是否显示标签
        position: 'top', //标签显示的位置
        distance: 5, //距离图形元素的距离
        formatter: ((params: any) => {
          return params.name
        }),
        color: 'green', //字体颜色
        fontStyle: 'italic', //字体风格
        fontWeight: 'bold',
        fontSize: 12,
        align: 'center',
        verticalAlign: 'middle',
        borderType: 'dashed',
        borderRadius: 10,
        padding: 5,
      },
      itemStyle: { //地图区域多边形图形样式
        areaColor: 'skyblue', //地图区域颜色

      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: '#29fcff'
        },
        label: {
          fontSize: 20
        }
      }
    },

    //布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    series: [
      {
        name: 'lines',
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.5,
          symbol: 'arrow', // 箭头图标
          symbolSize: 10 // 图标大小
        },
        lineStyle: {
          color: '#ff4b7a',
          width: 2,
          opacity: 0.8,
          curveness: 0.2 //曲线的弯曲程度
        },
        data: [
          {
            coords: [
              [116.405285, 39.904989],  // 起点
              [126.642464, 45.756967]   // 终点
            ],
          },
          {
            coords: [
              [116.405285, 39.904989],  // 起点
              [114.298572, 30.584355]   // 终点
            ],
          },
          {
            coords: [
              [116.405285, 39.904989],  // 起点
              [91.132212, 29.660361]   // 终点
            ],
          },
        ],
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { // 涟漪特效
          period: 4, // 动画时间，值越小速度越快
          brushType: 'stroke', // 波纹绘制方式 stroke, fill
          scale: 4 // 波纹圆环最大限制，值越大波纹越大
        },
        symbol: 'circle',
        symbolSize: function () {
          return 10 // 圆环大小
        },
        itemStyle: {
          show: false,
          color: 'yellow'
        },
        data: [
          {
            name: '北京市',
            value: [116.405285, 39.904989]
          },
          {
            name: '湖北省',
            value: [114.298572, 30.584355]
          },
          {
            name: '西藏自治区',
            value: [91.132212, 29.660361]
          },
          {
            name: '黑龙江省',
            value: [126.642464, 45.756967]
          },
        ]
      }

    ]
  })
})

</script>
<style lang="scss" scoped></style>